<template>
	<div class="system-menu-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="menuDialogFormRef" :rules="rules" :model="form" size="default" label-width="80px" style="padding-right: 50px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="学生学号" prop="sno">
							<template #label>
								<el-tooltip effect="dark" placement="top-start">
									<span>学生学号</span>
								</el-tooltip>
							</template>
							<el-input v-model="form.sno" placeholder="请输入学生学号" clearable></el-input>
						</el-form-item>
						<el-form-item label="学生班级" prop="sclass">
							<template #label>
								<el-tooltip effect="dark" placement="top-start">
									<span>学生班级</span>
								</el-tooltip>
							</template>
							<el-input v-model="form.sclass" placeholder="请输入学生班级" clearable></el-input>
						</el-form-item>
						<el-form-item label="出生日期" prop="birthdate">
							<div class="block">
								<el-date-picker v-model="form.birthdate" style="width: 568px" type="datetime" placeholder="Select date and time" />
							</div>
						</el-form-item>
						<el-form-item label="学生姓名" prop="name">
							<template #label>
								<el-tooltip effect="dark" placement="top-start">
									<span>学生姓名</span>
								</el-tooltip>
							</template>
							<el-input v-model="form.name" placeholder="请输入学生姓名" clearable></el-input>
						</el-form-item>

						<el-form-item label="身份" prop="position">
							<template #label>
								<el-tooltip effect="dark" placement="top-start">
									<span>学生身份</span>
								</el-tooltip>
							</template>
							<el-select v-model="form.position" placeholder="请选择学生身份" style="width: 240px">
								<el-option
									v-for="item in options"
									style="width: 150"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									:disabled="item.disabled"
								/>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel(form)" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(form)" size="default">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!--     //编辑弹出框    -->
	</div>
</template>

<script setup lang="ts" name="systemMenuDialog">
import { reactive, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { i18n } from '/@/i18n/index';
import { useLoginApi } from '/@/api/login';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { RouteRecordRaw } from 'vue-router';
import { trickle } from 'nprogress';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";


const options = [
	{
		value: '学生',
		label: '学生',
	},
	{
		value: '审核',
		label: '审核',
		disabled: true,
	},
	{
		value: '教师',
		label: '教师',
		disabled: true,
	},
];
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 引入组件

// 定义变量内容
const menuDialogFormRef = ref<FormInstance>();
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const state = reactive({
	tableData: {
		data: [] as RouteRecordRaw[],
		loading: true,
	},
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	ruleForm: {
		data: [],
		param: {
			user: JSON.parse(localStorage.getItem('user') || '{}'),
			sno: '',
			sclass: '',

			name: '',
			datas: [],
		},
		birthdate: [],
		menuSuperior: [], // 上级菜单
		menuType: 'menu', // 菜单类型
		component: '', // 组件路径
		componentAlias: '', // 组件路径别名
		isLink: false, // 是否外链
		menuSort: 0, // 菜单排序
		path: '', // 路由路径
		redirect: '', // 路由重定向，有子集 children 时
		meta: {
			title: '', // 菜单名称
			icon: '', // 菜单
			isHide: false, // 是否隐藏
			isKeepAlive: true, // 是否缓存
			isAffix: false, // 是否固定
			isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
			isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
			roles: '', // 权限标识，取角色管理
		},
		btnPower: '', // 菜单类型为按钮时，权限标识
	},
	menuData: [] as RouteItems, // 上级菜单数据
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const form = reactive({
	id:0,
	sno: '',
	sclass: '',
	birthdate: '',
	name: '',
	position: '',
});
//表单校验
const rules = reactive<FormRules>({
	sno: [{required:true,message:"请输入学号",trigger:"blur"}],
	sclass: [{required:true,message:"请输入班级",trigger:"blur"}],
	birthdate: [{required:true,message:"请选择出生日期",trigger:"blur"}],
	name: [{required:true,message:"请输入姓名",trigger:"blur"}],
	position: [{required:true,message:"请选择身份",trigger:"blur"}],
})

// 获取 pinia 中的路由
const getMenuData = (routes: RouteItems) => {
	const arr: RouteItems = [];
	routes.map((val: RouteItem) => {
		val['title'] = i18n.global.t(val.meta?.title as string);
		arr.push({ ...val });
		if (val.children) getMenuData(val.children);
	});
	return arr;
};

function das() {
	const a = JSON.parse(localStorage.getItem('data') || '{}');
	form.id=a.id
	form.sno = a.sno;
	form.sclass = a.sclass;
	form.birthdate = getLocalTime(a.birthdate);
	form.name = a.name;
	form.position = a.position;
}

function getLocalTime(value: any) {
	let time = value[0] + '-' + value[1] + '-' + value[2];
	return time;
}
// 打开弹窗
const openDialog = (type: string, row?: any) => {
	if (type === 'edit') {
		das();
		// 模拟数据，实际请走接口
		row.menuType = 'menu';
		row.menuSort = Math.floor(Math.random() * 100);
		state.ruleForm = JSON.parse(JSON.stringify(row));
		state.dialog.title = '修改菜单';
		state.dialog.submitTxt = '修 改';
	} else {
		state.dialog.title = '新增菜单';
		state.dialog.submitTxt = '新 增';
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
function onCancel(form: any) {
	form.sno = null;
	form.sclass = null;
	form.birthdate = null;
	form.name = null;
	form.position = null;
	state.dialog.isShowDialog = false;
	closeDialog();
}

// 添加和修改提交
const onSubmit = async (form: any) => {
	if(form.id!=0){
		const a = form.birthdate.split('-');
	for (let i = 0; i < a.length; i++) {
		state.ruleForm.birthdate[i] == a[i];
		form.birthdate = state.ruleForm.birthdate;
	}
	}
	useLoginApi()
		.save(form)
		.then((res) => {
			if (res.code === 1) {
				ElMessage.success('成功');
				location.reload();
			}else{
				menuDialogFormRef.value?.validate().catch(err=>{
					ElMessage.error('表单校验失败...') 
					throw err})
			}
		});
	form = null;
	state.dialog.isShowDialog = false;
};

//获取login信息
const getAllLogin = async () => {
	useLoginApi().getAllLogin();
};
// 页面加载时
onMounted(() => {
	getAllLogin();
	// state.menuData = getMenuData(routesList.value);
});

// 暴露变量
defineExpose({
	openDialog,
});
</script>


